<template>
  <div id="app" v-bind:style="appDivStyle">
      <div class="context" ref="context">
           <div class="queryBox" ref="queryBox">
                <el-form :model="formQueryCondition"
                         ref="form" size="mini">
                    <el-row>
                        <!-- 变量名称 -->
                        <el-col :span="5">
                            <el-form-item :label="$t('Dictionary.queryLabel.variableName')"   :label-width="queryformLabelWidth">
                                <el-input v-model.trim="formQueryCondition.valueText.val" class="queryItemStyle" clearable
                                        :placeholder="$t('Dictionary.queryLabel.placeholderVariableName')">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 变量编码 -->
                        <el-col :span="5" :offset="1">
                            <el-form-item :label="$t('Dictionary.queryLabel.variableCode')"   :label-width="queryformLabelWidth">
                                <el-input v-model.trim="formQueryCondition.valueCode.val" class="queryItemStyle" clearable
                                        :placeholder="$t('Dictionary.queryLabel.placeholderVariableCode')">
                                </el-input>
                            </el-form-item>
                        </el-col>
                         <!--     <el-form-item :label="$t('Dictionary.queryLabel.variableValue')"   :label-width="queryformLabelWidth">
                                <el-input v-model.trim="formQueryCondition.valueTypeName.val" class="queryItemStyle" clearable
                                        :placeholder="$t('Dictionary.queryLabel.placeholderVariableValue')">
                                </el-input>
                            </el-form-item> -->
                            <!-- 类型名称 -->
                        <el-col :span="5" :offset="1">
                            <el-form-item :label="$t('Dictionary.queryLabel.typeName')"   :label-width="queryformLabelWidth">
                                <el-select v-model="formQueryCondition.valueTypeCode.val" class="queryItemStyle">
                                    <el-option :label="$t('Dictionary.label.all')" value=""></el-option>
                                    <el-option :value="drug.valueTypeCode" :key="drug.valueTypeCode" :label="drug.valueTypeName"
                                        v-for="drug in valueTypes"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 状态 -->
                        <el-col :span="5" :offset="1">
                            <el-form-item :label="$t('Dictionary.queryLabel.status')"  :label-width="queryformLabelWidth">
                                <el-select v-model="formQueryCondition.isEnable.val" class="queryItemStyle">
                                    <el-option :label="$t('label.all')" value=""></el-option>
                                    <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText"
                                        v-for="drug in enables"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 列表上的按钮 -->
                    <el-row>
                        <el-col :span="24">
                            <div style="text-align:right">
                                <el-form-item>
                                    <!-- 新增 -->
                                    <el-button type="primary" v-if="test('onNewBtn')"
                                    v-permission="{menuCode: menuCode, resourceCode: 'newVariables'}"
                                    @click="onNew('newVariables')">{{ $t('btnText.newVariableBtnText') }}</el-button>
                                <!-- </el-form-item> -->
                                <!-- <el-form-item>
                                    <el-button type="primary" v-if="test('onNewBtn')"
                                    @click="onNew2">{{ $t('btnText.newBtnText') }}</el-button>
                                </el-form-item> -->
                                <!-- <el-form-item> -->
                                    <!-- 重置 -->
                                    <el-button v-permission="{menuCode: menuCode, resourceCode: 'resetBtnText'}" type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
                                <!-- </el-form-item> -->
                                <!-- <el-form-item>
                                    <el-button type="primary" @click="onExport" icon="el-icon-download" :loading="loading">{{ $t('btnText.exportBtnText') }}</el-button>
                                </el-form-item> -->
                                <!-- <el-form-item> -->
                                    <!-- 查询 -->
                                    <el-button v-permission="{menuCode: menuCode, resourceCode: 'queryBtnText'}" type="primary" @click="onQuery('queryBtnText')" icon="el-icon-search" :loading="loading">{{ $t('btnText.queryBtnText') }}</el-button>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="dataBox" ref="dataBox">

                <transition enter-active-class="animated zoomIn" leave-active-class="animated rotateOut">
                    <el-table v-if="isInit" ref="singleTable"
                                :data="tableData"
                                :height="tableHeight"
                                @sort-change="sortChange"
                                v-loading="loading" size="mini"
                                style="width: 100%;" stripe=stripe border=border>
                        <el-table-column type="index"  width="50" fixed="left"
                                            :label="$t('table.xh')" align="center">
                        </el-table-column>
                        <el-table-column :label="$t('table.op')" fixed="left" min-width="190">
                            <template slot-scope="scope">
                                <el-button size="gv" icon="el-icon-edit" :loading="loading"
                                v-permission="{menuCode: menuCode, resourceCode: 'editBtnText'}"
                                @click="edit(scope.$index, scope.row,'editBtnText')"
                                            >{{ $t('btnText.editBtnText') }}</el-button>
                                <!-- 恢复按钮 -->
                                <el-button size="gv" icon="el-icon-delete"
                                            v-permission="{menuCode:menuCode,resourceCode:'recoveryBtnText'}"
                                            type="danger" :loading="loading" @click="revertLogoffRow(scope.$index, scope.row,'recoveryBtnText')" v-show="scope.row.isEnable=='Invalid'"
                                            >{{ $t('btnText.recoveryBtnText') }}</el-button>
                                     <el-button size="gv" icon="el-icon-delete" v-if="scope.row.isEnable=='Invalid'"
                                     v-permission="{menuCode: menuCode, resourceCode: 'delBtnText'}"
                                            type="danger" :loading="loading" @click="deleteRow(scope.$index, scope.row,'delete')"
                                            >{{ $t('btnText.deleteBtnText') }}</el-button>
                                     <el-button size="gv" icon="el-icon-delete" v-show="scope.row.isEnable=='Available'"
                                     v-permission="{menuCode: menuCode, resourceCode: 'passBtnText'}"
                                            type="danger" :loading="loading" @click="logoffRow(scope.$index, scope.row,'passBtnText')"
                                            >{{ $t('btnText.logoffBtnText') }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="valueText" min-width="140" fixed="left"
                                            :label="$t('Dictionary.table.variableName')" sortable="custom" sort-by="valueText">
                        </el-table-column>
                        <el-table-column prop="valueCode" min-width="140" fixed="left"
                                            :label="$t('Dictionary.table.variableCode')" sortable="custom" sort-by="valueCode">
                        </el-table-column>
                        <el-table-column prop="valueText" min-width="140" fixed="left"
                                            :label="$t('Dictionary.table.variableValue')" sortable="custom" sort-by="valueText">
                        </el-table-column>
                        <el-table-column prop="valueTypeName" min-width="140"
                                            :label="$t('Dictionary.table.typeName')" sortable="custom" sort-by="valueTypeName">
                        </el-table-column>
                        <el-table-column prop="valueTypeCode" min-width="140"
                                            :label="$t('Dictionary.table.typeCode')" sortable="custom" sort-by="valueTypeCode">
                        </el-table-column>
                        <!-- <el-table-column prop="desc" min-width="140" fixed="left"
                                            :label="$t('Dictionary.table.desc')" sortable="custom" sort-by="providerName">
                        </el-table-column> -->
                        <el-table-column prop="isEnableName" min-width="110" sortable="custom"
                        :label="$t('Dictionary.table.status')" sort-by="isEnable">
                        </el-table-column>

                        <el-table-column :label="$t('Dictionary.table.lastUpdatedBy')" min-width="120" sortable="custom" prop="modifier" sort-by="modifier">
                        </el-table-column>
                        <el-table-column :label="$t('Dictionary.table.lastUpdateTime')" min-width="180" sortable="custom" prop="lastUpdatedDate" sort-by="lastUpdatedDate">
                        </el-table-column>

                    </el-table>
                </transition>

            </div>
        </div>
        <div class="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
        </div>

         <!--编辑对话框1-->
        <transition enter-active-class="animated rotateIn" leave-active-class="animated rotateOut">
            <el-dialog :title="$t('label.dialogTitle')" :visible.sync="isShowEditForm" top="5vh" :close-on-click-modal="false">
                <el-form :model="editForm" ref="editForm" size="mini"
                        :label-position="editFormPosition" status-icon=status-icon :rules="editRules">
                    <el-form-item :label="$t('Dictionary.editLabel.variableName')"
                        :label-width="editformLabelWidth" prop="valueText">
                        <el-input v-model.trim="editForm.valueText" maxlength="20"
                                :placeholder="$t('Dictionary.editLabel.placeholderVariableName')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('Dictionary.editLabel.variableCode')"
                        :label-width="editformLabelWidth" prop="valueCode">
                        <el-input v-model.trim="editForm.valueCode" maxlength="20" :disabled="canEditCode"
                                :placeholder="$t('Dictionary.editLabel.placeholderVariableCode')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('Dictionary.editLabel.typeName')"
                        :label-width="editformLabelWidth" prop="valueTypeCode">
                        <el-select v-model="editForm.valueTypeCode" v-on:change="indexSelect" class="queryItemStyle" :placeholder="$t('Dictionary.editLabel.placeholderTypeName')">
                            <el-option :label="$t('Dictionary.label.all')" value=""></el-option>
                            <el-option :value="drug.valueTypeCode" :key="drug.valueTypeCode" :label="drug.valueTypeName" v-for="drug in valueTypes"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-input v-model.trim="editForm.valueTypeName" v-show="false"></el-input>
                    <!-- 排序 -->
                    <el-form-item :label="$t('Dictionary.editLabel.scort')"
                        :label-width="editformLabelWidth" prop="scort">
                        <el-input v-model.trim="editForm.scort" maxlength="20"
                                :placeholder="$t('Dictionary.editLabel.placeholderScort')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('Dictionary.queryLabel.status')"  :label-width="editformLabelWidth">
                        <el-select v-model="editForm.isEnable" class="queryItemStyle">
                            <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText" v-for="drug in enables"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
                <div slot="footer">
                    <el-button size="mini" @click="isShowEditForm = false" :loading="loading">{{ $t('btnText.cancelBtnText') }}</el-button>
                    <el-button size="mini" type="primary" @click="submitForm('editForm',currentResCode)" :loading="loading">{{ $t('btnText.saveBtnText') }}</el-button>
                </div>
            </el-dialog>
        </transition>

         <!--编辑对话框2-->
        <transition enter-active-class="animated rotateIn" leave-active-class="animated rotateOut">
            <el-dialog :title="$t('label.dialogTitle')" :visible.sync="isShowEditForm2" top="5vh" :close-on-click-modal="false">
                <el-form :model="editForm2" ref="editForm2" size="mini"
                        :label-position="editFormPosition" status-icon=status-icon :rules="editRules2">
                    <el-form-item :label="$t('Dictionary.editLabel.typeName')"
                        :label-width="editformLabelWidth" prop="valueTypeName">
                        <el-input v-model.trim="editForm2.valueTypeName" maxlength="20" :disabled="canEditCode"
                                :placeholder="$t('Dictionary.editLabel.placeholderTypeName')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('Dictionary.editLabel.typeCode')"
                        :label-width="editformLabelWidth" prop="valueTypeCode">
                        <el-input v-model.trim="editForm2.valueTypeCode" maxlength="20" :disabled="canEditCode"
                                :placeholder="$t('Dictionary.editLabel.placeholderTypeCode')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('Dictionary.queryLabel.status')"  :label-width="editformLabelWidth">
                        <el-select v-model="editForm2.isEnable" class="queryItemStyle">
                            <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText" v-for="drug in enables"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
                <div slot="footer">
                    <el-button size="mini" @click="isShowEditForm2 = false" :loading="loading">{{ $t('btnText.cancelBtnText') }}</el-button>
                    <el-button size="mini" type="primary" @click="submitForm2('editForm2',currentResCode)" :loading="loading">{{ $t('btnText.saveBtnText') }}</el-button>
                </div>
            </el-dialog>
        </transition>

  </div>


</template>

<script>

import comBaseVue from '../../baseViewModel';

export default {
  mixins: [comBaseVue],
  name:'Dictionary',
  props: {
    menuCode: String
  },
  data () {

    return {
        queryformLabelWidthLong:"110px",
        isInit:false,
        isShowEditForm2:false,
        tableHeight:100,
        appDivStyle:{
            height:this.$store.getters.appHeight,
        },
        editForm2:{},
        valueTypes: [],
        enables: [],
        modelName:"com.ispr.iptv.entity.sys.SysValue",
        // 查询条件
        formQueryCondition: {
            valueText: {
                key: 'valueText',
                op: 'LIKE', // 操作符
                val: '' // 查询的值
            },
            valueCode: {
                key: 'valueCode',
                op: 'LIKE', // 操作符
                val: '' // 查询的值
            },
            valueTypeCode: {
                key: 'valueTypeCode',
                op: 'LIKE', // 操作符
                val: '' // 查询的值
            },
            isEnable: {
                key: 'isEnable',
                op: '=', // 操作符
                val: 'Available'
            },
        },

        // 编辑面板绑定的对象
        editForm: {
            keyId: 0,
            version: 0,
            valueText: "",
            valueCode: "",
            valueTypeCode: "",
            valueTypeName: "",
            scort: 1,
            isEnable: "Available",
        },
        // 编辑面板的验证规则
        editRules: {
            valueText: [{ required: true, message: this.$i18n.t('Dictionary.rules.placeholderVariableCode'), trigger: 'blur' }],
            valueCode: [{ required: true, message: this.$i18n.t('Dictionary.rules.placeholderVariableCode'), trigger: 'blur' }],
            valueTypeCode: [{ required: true, message: this.$i18n.t('Dictionary.rules.placeholderVariableCode'), trigger: 'blur' }],
            scort: [{ required: true, message: this.$i18n.t('Dictionary.rules.placeholderscort'), trigger: 'blur' }],
        },
        // 编辑面板2绑定的对象
        editForm2: {
            keyId: 0,
            version: 0,
            valueTypeName: "",
            valueTypeCode: "",
            scort: 0,
            isEnable: "Available",
        },
        // 编辑面板2的验证规则
        editRules2: {
            valueTypeName: [{ required: true, message: this.$i18n.t('Dictionary.rules.placeholderTypeName'), trigger: 'blur' }],
            valueTypeCode: [{ required: true, message: this.$i18n.t('Dictionary.rules.placeholderTypeCode'), trigger: 'blur' }],
        },
    }
  },
  methods:{
      test:function(btnCode){
          return true;
        },
    indexSelect(){
        this.editForm.valueTypeName = this.valueTypes.find( d => d.valueTypeCode === this.editForm.valueTypeCode).valueTypeName;
     },

    // 新增变量1
    onNew: function(rescode) {
        this.currentResCode = (rescode && rescode!=='') ? rescode : '';
        this.isShowEditForm = true;
        if (this.$refs['editForm']) {
            this.$refs['editForm'].resetFields();
        }
        this.editForm.keyId = "";
        this.editForm.version = "";
        this.editForm.valueText = "";
        this.editForm.valueCode = "";
        this.editForm.valueTypeCode = "";
        this.editForm.valueTypeName = "";
        this.editForm.isEnable = "Available";
        this.curCommand = "SaveNew";
        this.canEditCode = false;
    },
    // 新增类型2
    onNew2: function() {
        this.isShowEditForm2 = true;
        if (this.$refs['editForm2']) {
            this.$refs['editForm2'].resetFields();
        }
        this.editForm2.keyId = "";
        this.editForm2.version = "";
        this.editForm2.valueTypeName = "";
        this.editForm2.valueTypeCode = "";
        this.editForm2.isEnable = "Available";
        this.curCommand = "SaveNew";
        this.canEditCode = false;
    },
    // 提交编辑面板2数据
        submitForm2: function submitForm(formName,rescode) {
            var _this = this;
            this.currentResCode = (rescode && rescode!=='') ? rescode : '';
            this.$refs[formName].validate(function (valid) {
                if (valid) {
                    _this.loading = true;
                    _this.procCommand(_this.curCommand,
                    _this.modelName,
                    "Default",
                    _this.editForm2,
                    _this.submitFormCallback2);
                } else {
                    return false;
                }
            });
        },
        // 执行命令后的回调函数
        submitFormCallback2: function submitFormCallback(isSuccess,json) {
            this.findValueTypes();
            this.loading = false;
            if(isSuccess){
                this.isShowEditForm2 = false;
                this.$message({
                    message: this.$i18n.t("message.successTip"),//resource.message.successTip,
                    type: 'success'
                });
                this.queryTable();
            }
            else
            {
                this.$message({
                                message: json.msg,
                                type: 'warning'
                                });
            }
        },

     // 重置
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.valueText.val = "";
        this.formQueryCondition.valueCode.val = "";
        this.formQueryCondition.valueTypeCode.val = "";
        this.formQueryCondition.isEnable.val = "Available";
    },


    // 编辑按钮回调事件
    editCallback: function(isSuccess,json) {
        if(isSuccess){
            this.curCommand = "PartialUpdateProc";
            this.canEditCode = true;
            if(json.scort==0){
                this.isShowEditForm2 = true;
                if (this.$refs['editForm2']) {
                    this.$refs['editForm2'].resetFields();
                }
                //this.editForm2 = json;
                this.editForm2.keyId = json.keyId;
                this.editForm2.version = json.version;
                this.editForm2.valueTypeName = json.valueTypeName;
                this.editForm2.valueTypeCode = json.valueTypeCode;
                this.editForm2.isEnable = json.isEnable;


            }else{
                this.isShowEditForm = true;
                if (this.$refs['editForm']) {
                    this.$refs['editForm'].resetFields();
                }
                //this.editForm = json;
                this.editForm.keyId = json.keyId;
                this.editForm.version = json.version;
                this.editForm.valueText = json.valueText;
                this.editForm.valueCode = json.valueCode;
                this.editForm.valueTypeCode = json.valueTypeCode;
                this.editForm.valueTypeName = json.valueTypeName;
                this.editForm.scort = json.scort;
                this.editForm.isEnable = json.isEnable;
            }
        }
        else{
            this.$message({
                message: json.msg,
                type: 'warning'
                });
        }
    },

    //为类型下拉框赋值
    findValueTypes:function(){
        var queryRequest = {
                className: this.modelName,//修改为被查询的实体地址
                opKey: "Type",//后台编写相应的接口实现方法，主要负责转化类型
                params: [],
                userInfo: this.getUserInfo()
            };
            var _this = this;
            this.axios.post('/api/findAllValueType', queryRequest, {headers: this.headersObj})//findAllValueType修改为query
                .then(function(res) {
                    // alert(JSON.stringify(res));
                    // alert(res.data.code);
                    if (res.data.code == "SUCCESS") {
                        _this.valueTypes = [];
                        for (var i = 0; i < res.data.data.length; i++) {
                            _this.valueTypes.push(res.data.data[i]);
                        }
                    } else {
                        this.$message.error(json.msg);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                    this.$message.error(json.msg);
                });
    },

    // 为状态下拉框赋值
    findEnables: function() {
        this.findByTypeCode("10001",this.setEnables)
    },
    // 查询状态下拉框数据成功后的回调
    setEnables: function(isSuccess,json) {
        try{
            if (isSuccess) {
                this.enables = [];
                for (var i = 0; i < json.data.length; i++) {
                    this.enables.push(json.data[i]);
                }
            }
            else {
                this.$message.error(json.msg);
            }
        }
        catch(e){
            alert(e);
        }
    },

    initTable:function(){
        this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
        this.isInit = true;
    },
  enterDown(){
      var g = this
      if(g.isShowEditForm){
          g.submitForm('editForm',g.currentResCode)
      }else if(g.isShowEditForm2){
          g.submitForm2('editForm2',g.currentResCode)
      }else if(g.isSiteChooseVis){
          g.freshLayout(g.$refs.siteChoose.siteList)
      }else if(!g.loading){
          g.onQuery()
      }
  }


  },
  mounted: function mounted() {

    this.findEnables();
    this.findValueTypes();
    this.onQuery();
    window.setTimeout(this.initTable,100);
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
